<script setup lang="ts">
import SearchView from '@/components/SearchView.vue'
import TodoList from './TodoList.vue'
import { useTodoStore } from '@/stores/modules/todo'
import { storeToRefs } from 'pinia'
import { reactive } from 'vue'
const store = useTodoStore()

const { getTodos, searchTodos, addTodo } = store
const { todos } = storeToRefs(store)
const handleSearch = (val: string) => {
  searchTodos(val)
}
const state = reactive({
  page: 1,
  size: 15
})
getTodos(state)
const clickAdd = () => {
  addTodo({
    content: 'click here to edit',
    isdone: false
  })
}
</script>

<template>
  <div class="todo-box">
    <SearchView @on-search="handleSearch"></SearchView>
    <TodoList :todos="todos"></TodoList>
    <van-button round icon="plus" class="button" type="primary" @click="clickAdd"></van-button>
  </div>
</template>
<style scoped lang="scss">
.todo-box {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0.1rem;
  &::-webkit-scrollbar {
    /* 滚动条宽 */
    display: none;
  }
  &::-webkit-scrollbar-thumb {
    /* 滚动条 拖动条 */
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
  }
  &::-webkit-scrollbar-track {
    /* 滚动条背景槽 */
    background-color: #eee;
    border-radius: 6px;
  }
  .list-box {
    flex: 1;
    background-color: rgb(247, 247, 247);
  }

  .button {
    position: fixed;
    bottom: 0.2rem;
    right: 0.2rem;
  }
  .van-button {
    width: 0.44rem;
    height: 0.44rem;
  }
}
</style>
